<template>
    <view>
        <view class="color-box">
            <view class="color-front" :style="'background:rgba(' + r + ',' + g + ',' + b + ',' + a / 100 + ')'"></view>
            <view :class="'color-back ' + (item % 3 === 0 ? 'gray' : 'white')" v-for="(item, index) in 100" :key="index"></view>
        </view>
        <view>
            <slider class="line" @change="bindchangeR" @changing="bindchangingR" min="0" max="255" :value="r" block-color="#FF0000" show-value />
            <slider class="line" @change="bindchangeG" @changing="bindchangingG" min="0" max="255" :value="g" block-color="#00FF00" show-value />
            <slider class="line" @change="bindchangeB" @changing="bindchangingB" min="0" max="255" :value="b" block-color="#0000FF" show-value />
            <slider class="line" @change="bindchangeA" @changing="bindchangingA" min="0" max="100" :value="a" show-value />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            r: 255,
            g: 255,
            b: 255,
            a: 100
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        color: {
            type: String,
            default: ''
        }
    },
    beforeMount: function () {
        // 在组件实例进入页面节点树时执行
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    onPageShow: function () {
        // 页面被展示
    },
    onPageHide: function () {
        // 页面被隐藏
    },
    onPageResize: function (size) {
        // 页面尺寸变化
    },
    /**
     * 组件的方法列表
     */
    methods: {
        bindchangingR(ev) {
            this.r = ev.detail.value
        },

        bindchangingG(ev) {
            this.g = ev.detail.value
        },

        bindchangingB(ev) {
            this.b = ev.detail.value
        },

        bindchangingA(ev) {
            this.a = ev.detail.value
        },

        bindchangeR() {
            console.log('占位：函数 bindchangeR 未声明');
        },

        bindchangeG() {
            console.log('占位：函数 bindchangeG 未声明');
        },

        bindchangeB() {
            console.log('占位：函数 bindchangeB 未声明');
        },

        bindchangeA() {
            console.log('占位：函数 bindchangeA 未声明');
        }
    }
};
</script>
<style>
.color-box {
    display: block;
    position: relative;
    width: 50vw;
    height: 50vw;
    margin: 20rpx auto;
    box-shadow: 0px 10rpx 30rpx rgba(0, 0, 0, 0.5);
}
.color-front {
    display: block;
    position: absolute;
    z-index: 1;
    width: 50vw;
    height: 50vw;
}
.color-back {
    float: left;
    display: inline;
    width: 5vw;
    height: 5vw;
}
.gray {
    background: gray;
}
.white {
    background: white;
}
.line {
    padding: 20rpx 0;
}
</style>
